<template>
	<view class="container">
			<uni-card is-full :is-shadow="false">
				
				<text class="uni-h6">帅哥你谁呀</text>
			</uni-card>
			<uni-section title="基本示例" type="line">
				<view class="example-body box">
					<button class="button" type="primary" @click="toggle('top')"><text class="button-text">顶部</text></button>
					<button class="button" type="primary" @click="toggle('bottom')"><text class="button-text">底部</text></button>
					<button class="button" type="primary" @click="toggle('center')"><text class="button-text">居中</text></button>
					<button class="button" type="primary" @click="toggle('left')"><text class="button-text">左侧</text></button>
					<button class="button" type="primary" @click="toggle('right')"><text class="button-text">右侧</text></button>
				</view>
			</uni-section>
	
			<uni-section title="基本控制" type="line" padding>
				<!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
							<swiper class="swiper" :indicator-dots="true">
								<swiper-item>
									<uni-grid :column="3" :highlight="true" @change="addLogEntry">
										<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
											<view class="grid-item-box">
												<!-- <image :src="item.url" class="image" mode="aspectFill" /> -->
												<text class="text">{{ item.text }}</text>
											</view>
										</uni-grid-item>
									</uni-grid>
								</swiper-item>
								<swiper-item>
									<uni-grid :column="3" :highlight="true" @change="change2">
										<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
											<view class="grid-item-box">
												<!-- <image :src="item.url" class="image" mode="aspectFill" /> -->
												<text class="text">{{ item.text }}</text>
											</view>
										</uni-grid-item>
									</uni-grid>
								</swiper-item>
								<swiper-item>
									<uni-grid :column="3" :highlight="true" @change="change2">
										<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
											<view class="grid-item-box">
												<!-- <image :src="item.url" class="image" mode="aspectFill" /> -->
												<text class="text">{{ item.text }}</text>
											</view>
										</uni-grid-item>
									</uni-grid>
								</swiper-item>
							</swiper>
				<!-- <view class="example-body box">
					
					<button class="button popup-success" @click="messageToggle('success')"><text
							class="button-text success-text">开灯</text></button>
					<button class="button popup-error" @click="messageToggle('error')"><text
							class="button-text error-text">查看温度111111111</text></button>
					<button class="button popup-warn" @click="messageToggle('warn')"><text
							class="button-text warn-text">查看湿度</text></button>
					<button class="button popup-info" @click="messageToggle('info')"><text
							class="button-text info-text">查看监控</text></button>
					<button class="button popup-info" @click="messageToggle('info')"><text
							class="button-text info-text">查看监控</text></button>
					<button class="button popup-info" @click="messageToggle('info')"><text
							class="button-text info-text">查看监控</text></button>
					<button class="button popup-info" @click="messageToggle('info')"><text
							class="button-text info-text">查看监控</text></button>
				</view> -->
			</uni-section>
	
			<!-- <uni-section title="基础卡片" type="line" @click="updateTemp"> -->
			<div title="传感器数据"  type="line">
				<div title="card 模式" mode="card" class="card-container">
				        <view class="card-item"  @click="updateTemp">
				            当前温度{{cgqData.temp}}
				        </view>
				        <view class="card-item"  @click="updateTemp">
				            当前湿度{{cgqData.water}}
				        </view>
				        <view class="card-item"  @click="updateTemp">
				            大气压力{{cgqData.CO2}}
				        </view>
				</div>
			</div>
			<!-- </uni-section> -->

			<uni-section title="对话框示例" type="line" class="hideOnPc">
				<view class="example-body box">
					<button class="button popup-success" @click="dialogToggle('success')"><text
							class="button-text success-text">成功</text></button>
					<button class="button popup-error" @click="dialogToggle('error')"><text
							class="button-text error-text">失败</text></button>
					<button class="button popup-warn" @click="dialogToggle('warn')"><text
							class="button-text warn-text">警告</text></button>
					<button class="button popup-info" @click="dialogToggle('info')"><text
							class="button-text info-text">信息</text></button>
				</view>
			</uni-section>
	
			<uni-section title="输入框示例" type="line" padding>
				<view class="dialog-box">
					<text class="dialog-text">输入内容：{{ value }}</text>
				</view>
				<button class="button" type="primary" @click="inputDialogToggle"><text
						class="button-text">输入对话框</text></button>
	
			</uni-section>
			<uni-section title="底部分享示例" type="line" padding>
				<button class="button" type="primary" @click="shareToggle"><text class="button-text">分享模版示例</text></button>
			</uni-section>
			<view>
				<!-- 普通弹窗 -->
				<uni-popup ref="popup" background-color="#fff" @change="change">
					<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }"><text
							class="text">popup 内容</text></view>
				</uni-popup>
			</view>
	
			<view>
				<!-- 提示信息弹窗 -->
				<uni-popup ref="message" type="message">
					<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
				</uni-popup>
			</view>
	
			<view>
				<!-- 提示窗示例 -->
				<uni-popup ref="alertDialog" type="dialog">
					<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="欢迎使用 uni-popup!" @confirm="dialogConfirm"
						@close="dialogClose"></uni-popup-dialog>
				</uni-popup>
			</view>
	
			<!-- <view> -->
				<!-- 输入框示例 -->
				<!-- <uni-popup ref="inputDialog" type="dialog">
					<uni-popup-dialog ref="inputClose"  mode="input" title="输入内容" value="对话框预置提示内容!"
						placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
				</uni-popup>
			</view> -->
	
	<!-- 操作日志列表 -->
			<view class="log-list">
			  <view v-for="(log, index) in logEntries" :key="index" class="log-entry">
				{{ log }}
			  </view>
			</view>
			<view>
				<uni-section title="基础用法" type="line">
							<uni-list>
								<uni-list-item title="列表文字">lalala</uni-list-item>
								<uni-list-item title="列表文字" rightText="右侧文字" />
								<uni-list-item title="列表文字" note="列表描述信息" rightText="右侧文字" />
							</uni-list>
				</uni-section>
			</view>
		</view>
</template>

<script>
	// import {operation} from '../../../../api/mywork/esp32/index.js'
	import getLatestCgqData from '../../../../api/mywork/esp32/index.js'
	import getWeather from '../../../../api/mywork/webapi/index.js'
	export default {
		data() {
			return {
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				value: '',
				
				dynamicList: [],
				list: [{
						url: '/static/c1.png',
						text: '开灯',
						badge: '0',
						type: "primary"
					},
					{
						url: '/static/c2.png',
						text: '查看监控',
						badge: '1',
						type: "success"
					},
					{
						url: '/static/c3.png',
						text: '查看温度',
						badge: '99',
						type: "warning"
					},
					{
						url: '/static/c4.png',
						text: '天气',
						badge: '2',
						type: "error"
					},
					{
						url: '/static/c5.png',
						text: 'Grid 5'
					},
					{
						url: '/static/c6.png',
						text: 'Grid 6'
					},
					{
						url: '/static/c7.png',
						text: 'Grid 7'
					},
					{
						url: '/static/c8.png',
						text: 'Grid 8'
					},
					{
						url: '/static/c9.png',
						text: 'Grid 9'
					}
				],
				logEntries: []  ,// 用于存储操作日志
				cgqData:{
					temp:"31.3",
					water:"50",
					CO2:"0.3"
				}
			}
		},
		onReady() {},
		created() {
		    this.updateTemp()
		  },
		methods: {
			updateTemp(e) {
				getLatestCgqData()
				      .then(result => {
					  
				        console.log('响应到达时间:',result, new Date())
				        this.cgqData = {
				          temp: result.temperature,
				          water: result.humidity,
				          CO2: result.pressure
				        }
				      })
				      .catch(error => {
				        console.error('错误详情:', error.response || error)
				      })
				getWeather('110101').then(res => {
										console.log("res",res.msg);
				})	  
			
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			
			change2(e) {
				console.log("e",e);
				let {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++

				uni.showToast({
					title: `点击第${index+1}个宫格`,
					icon: 'none'
				})
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			messageToggle(type) {
				this.msgType = type
				this.messageText = `这是一条${type}消息提示`
				this.$refs.message.open()
			},
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				console.log('点击确认')
				this.messageText = `点击确认了 ${this.msgType} 窗口`
				this.$refs.message.open()
			},
			inputDialogToggle() {
				this.$refs.inputDialog.open()
			},
			dialogClose() {
				console.log('点击关闭')
			},
			dialogInputConfirm(val) {
				uni.showLoading({
					title: '3秒后会关闭'
				})

				setTimeout(() => {
					uni.hideLoading()
					console.log(val)
					this.value = val
					// 关闭窗口后，恢复默认内容
					this.$refs.inputDialog.close()
				}, 3000)
			},
			shareToggle() {
				this.$refs.share.open()
			},
			addLogEntry() {
			      // 获取当前时间
			      const now = new Date().toLocaleString();
			      // 生成一条新的日志条目
			      const newLogEntry = `操作于 ${now}: 点击了添加操作日志按钮`;
				  
			      // 将新日志条目添加到 logEntries 数组中
			      this.logEntries.push(newLogEntry);
				  
				  operation({'operation':'openLight'}).then(res => {
				    console.log("res",res.msg);
				  })
			    }
		}
	}
</script>

<style lang="scss">
	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	@mixin height {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}

	.box {
		@include flex;
	}

	.button {
		@include flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 35px;
		margin: 0 5px;
		border-radius: 5px;
	}

	.example-body {
		background-color: #fff;
		padding: 10px 0;
	}

	.button-text {
		color: #fff;
		font-size: 12px;
	}

	.popup-content {
		@include flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 50px;
		background-color: #fff;
	}

	.popup-height {
		@include height;
		width: 200px;
	}

	.text {
		font-size: 12px;
		color: #333;
	}

	.popup-success {
		color: #fff;
		background-color: #e1f3d8;
	}

	.popup-warn {
		color: #fff;
		background-color: #faecd8;
	}

	.popup-error {
		color: #fff;
		background-color: #fde2e2;
	}

	.popup-info {
		color: #fff;
		background-color: #f2f6fc;
	}

	.success-text {
		color: #09bb07;
	}

	.warn-text {
		color: #e6a23c;
	}

	.error-text {
		color: #f56c6c;
	}

	.info-text {
		color: #909399;
	}

	.dialog,
	.share {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.dialog-box {
		padding: 10px;
	}

	.dialog .button,
	.share .button {
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
		margin: 0;
		margin-top: 10px;
		padding: 3px 0;
		flex: 1;
	}

	.dialog-text {
		font-size: 14px;
		color: #333;
	}
	
	.swiper {
			height: 420px;
		}
		
	.grid-item-box {
			flex: 1;
			// position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 15px 0;
		}

		.grid-item-box-row {
			flex: 1;
			// position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding: 15px 0;
		}

		.grid-dot {
			position: absolute;
			top: 5px;
			right: 15px;
		}
		
		.log-list {
		  margin-top: 10px;
		  border: 1px solid #ccc;
		  padding: 10px;
		  border-radius: 5px;
		  max-height: 200px; /* 设置最大高度 */
		  overflow-y: auto; /* 添加滚动条 */
		}
		
		.log-entry {
		  margin-bottom: 5px;
		}

		.card-container {
		    display: flex;
		    justify-content: space-between; /* 平均分布子元素 */
		    align-items: center; /* 垂直居中对齐 */
		    padding: 10px;
		}

		.card-item {
		    flex: 1; /* 让每个框平均占据可用空间 */
		    margin: 0 5px; /* 设置左右间距 */
		    padding: 15px;
		    text-align: center; /* 文本居中 */
		    font-size: 16px;
		    border-radius: 8px; /* 圆角 */
		    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
		}

		/* 温度框样式 */
		.card-item:nth-child(1) {
		    background-color: #ffcccb; /* 淡红色，代表温度 */
		}

		/* 湿度框样式 */
		.card-item:nth-child(2) {
		    background-color: #add8e6; /* 淡蓝色，代表湿度 */
		}

		/* 二氧化碳浓度框样式 */
		.card-item:nth-child(3) {
		    background-color: #90ee90; /* 淡绿色，代表二氧化碳浓度 */
		}

</style>


